<template>
    <div id="articleInfo">
        <div class="articleInfo">
            <h1>{{article.title}}</h1>
            <ul>
                <li class="info-postDate">{{article.postDate}}</li>
                <li class="info-source">{{article.source}}</li>
                <li class="info-tags">[<label v-for="(item, index) in article.tags" :key="index"> {{item.name}} </label>]</li>
            </ul>
            <div class="info-content" v-html="article.content"></div>
            <div class="info-foot">
                <label class="info-endorse" @click="endorse(article.id)">{{article.endorseCount}}</label>
            </div>
        </div>
        <articleRight></articleRight>
    </div>
</template>
<script>
import articleRight from '@/components/article/right'
import https from '../../https'

export default {
  name: 'articleInfo',
  components: {
    articleRight
  },
  data () {
    return {
      isEndorse: false,
      article: {}
    }
  },
  mounted () {
    console.log(this.$route.query.id)
    https.fetchPost('/article/getById', {id: this.$route.query.id}).then((data) => {
      this.article = data.data
    }).catch(err => function () {
      console.log(err)
    })
  },
  methods: {
    endorse: function (id) {
      if (!this.isEndorse) {
        var temp = document.getElementsByClassName('info-endorse')[0]
        temp.className += ' info-endorse-select'
        this.isEndorse = true
      }
    }
  }
}
</script>
<style scoped>
#articleInfo{
    width: 1100px;
    margin: 6rem auto;
}
.articleInfo{
    float: left;
    width: 70%;
}
.info-content{
    text-align: left;
}
.articleInfo ul {
    margin: 1rem 0;
    width: 100%;
}
.articleInfo ul li{
    display: inline-block;
    list-style: none;
    margin: 0 0 0 0;
    color: rgb(114, 113, 113);
    font: normal 0.6rem/1rem 微软雅黑;
    padding-left: 1.1rem;
    text-align: left;
}
.info-postDate{
    background: url(../../assets/postDate.png) no-repeat;
    width: 26%;
}
.info-source{
    background: url(../../assets/source.png) no-repeat;
    width: 25%;
}
.info-tags{
    background: url(../../assets/tag.png) no-repeat;
    width: 38%;
}
.info-foot{
    margin: 1rem 0 3rem 0;
    text-align: right;
}
.info-endorse{
    cursor: pointer;
    margin: 0 2rem;
    padding-left: 1.2rem;
    background: url(../../assets/endorse0.png) no-repeat;
}
.info-endorse:hover{
    background: url(../../assets/endorse.png) no-repeat;
}
.info-endorse-select{
    background: url(../../assets/endorse.png) no-repeat;
}
</style>
